import { Album } from "@/api/interface/album";
import { getAlbumListApi } from "@/api/modules/album";
import { Form, Button, FormInstance, Card, Select } from "antd";
import { DefaultOptionType } from "antd/lib/select";
import React, { useEffect, useRef, useState } from "react";

interface Props {
	onSearch: (albumId?: number) => void;
}

const PhotoFilter: React.FC<Props> = props => {
	const { onSearch } = props;

	const [options, setOptions] = useState<DefaultOptionType[]>([]);

	const getAlbumList = async () => {
		const res = await getAlbumListApi(1, 999);
		if (res.code === 200) {
			const ops = res.data.rows.map(item => {
				return {
					value: item.id,
					label: item.album_name
				};
			});
			setOptions(ops);
		}
	};

	useEffect(() => {
		getAlbumList();
	}, []);

	const handleChange = (value: number) => {
		onSearch(value);
	};

	const formRef = useRef<FormInstance | null>(null);

	const onFinish = (album?: Album) => {
		// onSearch(album);
	};

	const reset = () => {
		formRef.current?.resetFields();
		onSearch();
	};

	const filterExtra = (
		<div style={{ display: "flex", gap: 8 + "px" }}>
			<Button type="primary" onClick={() => reset()}>
				重置
			</Button>
		</div>
	);

	return (
		<Card title="数据筛选" extra={filterExtra}>
			<Form ref={formRef} layout="inline" onFinish={onFinish}>
				<Form.Item label="相册" name="album_name">
					<Select style={{ width: 120 }} onChange={handleChange} options={options} />
				</Form.Item>

				<Form.Item wrapperCol={{ offset: 4 }}>
					<Button htmlType="submit" type="primary"></Button>
				</Form.Item>
			</Form>
		</Card>
	);
};

export default PhotoFilter;
